import React,{useEffect,useState}from 'react'
import { Table, Modal, Button,Form,Input,Upload, message,Space,Descriptions, Badge,Menu, Dropdown} from 'antd';
import { UploadOutlined,UsbOutlined,DownOutlined,CheckOutlined,CloseOutlined} from '@ant-design/icons';
import {reqGetInventory,reqSelectOverdue,reqAdminExtension,reqRemoveState} from '../../api/index'
import { saveAs } from 'file-saver';
import './index.css' 
export default function News(){
    const [visible2,setVisible2] = useState(false)
    const [visible1,setVisible1] = useState(false)
    const [data2,setData2] = useState([])
    const [dataSource,setDataSource] = useState([])
    const [goodsIds,setGoodsId] = useState(null);
    const [access,setAccess] = useState(null);
    const [chaAcces,setChaAcces] = useState('请点击按钮选择状态')
    //更改存取状态
      const columns2 = [
        {
          title: '物品名称',
          dataIndex: 'goodsName',
          key: 'goodsName',
          render: text => <a>{text}</a>,
        },
        {
          title: '物品数量',
          dataIndex: 'goodsNum',
          key: 'goodsNum',
        },
        {
          title: '物品规格',
          dataIndex: 'goodsWeight',
          key: 'goodsWeight',
        },
      ];
      
      const columns = [
        {
          title: '物品ID',
          dataIndex: 'goodsId',
          key: 'goodsId',
          render: text => <a>{text}</a>,
        },
        {
          title: '经办人姓名',
          dataIndex: 'agentName',
          key: 'agentName',
        },
        {
          title: '经办人电话',
          dataIndex: 'agentPhone',
          key: 'agentPhone',
        },
        {
          title: '负责人姓名',
          dataIndex: 'chargeName',
          key: 'chargeName',
        },
        {
          title: '负责人电话',
          dataIndex: 'chargePhone',
          key: 'chargePhone',
        },
        {
          title:'所在院',
          dataIndex: 'college',
          key: 'college',
        },
        {
          title:'申请时间',
          dataIndex: 'applicationTime',
          key: 'applicationTime',
        },
        {
          title:'存取状态',
          dataIndex: 'accessControl',
          key: 'accessControl',
        },
        {
          title: '续费操作',
          key: 'action',
          render: (text, record) => (
            <Space size="middle">
              <Button onClick={()=>{
                  const param = {
                    goodsId:record.goodsId,
                  }
                  checkClick(param)
              }} type='primary'>查看详情</Button>
              <Button onClick={()=>{
                  const params = {
                    chargeName:record.chargeName,
                  }
                  offerClick(params)
              }} type='primary'>更改存取状态</Button>
               {/* <Dropdown trigger={['click']} overlay={menu}>  
                更改存取状态<DownOutlined />
              </Dropdown> */}
              {/* <Dropdown overlay={menu} trigger={['click']}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                更改存取状态<DownOutlined />
                </a>
              </Dropdown> */}
            </Space>
          ),
        },
      ];
      const changeType = (e) =>{
        if(e === 0){
          return '可存取'
        }else{
          return '不可存取'
        }
      }
      const checkClick=(e)=>{
        console.log(e.goodsId)
        setData2([])
        reqSelectOverdue().then(res=>{
          res.data.map((item,index)=>{
            if(item.goodsId == e.goodsId){
              setData2(item.goodsInfoList)
              console.log(item.goodsInfoList)
            }
          })
        })
        setVisible2(true)
      }
      const onKeclick = ()=>{
        setAccess(0)
        setChaAcces('可存取')
      }
      const onNoclick = () =>{
        setAccess(1)
        setChaAcces('不可存取')
      }
      const offerClick=(e)=>{
        console.log(e)
        setGoodsId(e.chargeName)
        setVisible1(true)
      }
      const props = {
        name: 'file',
        action: 'http://192.168.109.170/api/admin/importExcel',
        // headers: {
        //   authorization: 'authorization-text',//携带token
        // },
        onChange(info) {
          if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
          }
          if (info.file.status === 'done') {
            message.success(`${info.file.name} 文件导入成功`);
          } else if (info.file.status === 'error') {
            message.error(`${info.file.name} 文件导入失败`);
          }
        },
      };
      useEffect(()=>{//放获取所有库存信息的接口
        reqSelectOverdue().then(res=>{
          let dataSources = []
          res.data.map((item,index)=>{
            console.log(item)
            let temValue = {
              accessControl: changeType(item.accessControl),
              agentName:item.agentName,
              agentPhone:item.agentPhone,
              applicationTime: item.applicationTime,
              chargeName: item.chargeName,
              chargePhone: item.chargePhone,
              college:item.college,
              goodsId:item.goodsId
            }
            dataSources.push(temValue)
            console.log(dataSources)
          })
        setDataSource(dataSources) 
        })
      },[])
     const onFinish=()=>{
       console.log(goodsIds)
       const Value = {
        accessControl:access,
         chargeName:goodsIds
       }
      //  reqAdminExtension(Value).then(res=>{
      //    console.log(res)
      //    if(res.code == 0){
      //      setDataSource([])
      //      setVisible1(false)
      //      message.success("物品续期成功！")
      //      reqSelectOverdue().then(res=>{
      //       setDataSource(res.data)
      //     })
      //    }
      //  })
      console.log(Value)
      reqRemoveState(Value).then(res=>{
        console.log(res)
        if(res.code == 0){
          setDataSource([])
          setVisible1(false)
          message.success("物品存取状态更改成功！")
          reqSelectOverdue().then(res=>{
            let dataSources = []
            res.data.map((item,index)=>{
              console.log(item)
              let temValue = {
                accessControl: changeType(item.accessControl),
                agentName:item.agentName,
                agentPhone:item.agentPhone,
                applicationTime: item.applicationTime,
                chargeName: item.chargeName,
                chargePhone: item.chargePhone,
                college:item.college,
                goodsId:item.goodsId
              }
              dataSources.push(temValue)
              console.log(dataSources)
            })
          setDataSource(dataSources) 
          })
        }
      })
     }
     const handleCancel=()=>{
        console.log('Clicked cancel button');
        setVisible2(false)
        setVisible1(false)
      };
    const handleOnclick=()=>{
          console.log('下载库存信息')
          // async() =>{
          // let res =  await reqGetInventory()//await后面放下载信息的接口
          //   saveAs(res.data,'库存信息.xlxs')
          // }
          reqGetInventory().then(res=>{
            saveAs(res,'库存信息.xlsx')
          })
      }
      const layout = {
        labelCol: {
          span: 8,
        },
        wrapperCol: {
          span: 16,
        },
      };
    return(<div>
        {/* <div className='buttonStyless'>
        <Upload className="optionButtons" {...props}>
            <Button  icon={<UsbOutlined />}>导入库存信息</Button>
        </Upload>
        <Button className="outButton" onClick={handleOnclick} icon={<UploadOutlined />}>导出库存信息</Button>
        </div> */}
        <Modal
          title="物品存储续期"
          visible={visible1}
          onCancel={handleCancel}
          footer=''
        >
                <Form  className="formItem"
                {...layout}
                name="basic"
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                >
                    <div className='title'>
                    已选择状态为:{chaAcces}
                    </div>
                    <Button className="onebutton_style" onClick={onKeclick}><CheckOutlined/>可存取</Button>
                    <Button className="onebutton_style" onClick={onNoclick}><CloseOutlined/>不可存取</Button>
                    <Form.Item className="buttonStyle">
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                    </Form.Item>
                </Form>
        </Modal>
        <Modal
          title="危险品详情"
          visible={visible2}
          onCancel={handleCancel}
          footer=''
        >
          <Table className="tableOne" columns={columns2} dataSource={data2} />
        </Modal>
        <Table className="table_style" dataSource={dataSource} columns={columns} />
    </div>)
}